<template>
  <el-card>
    <div class="homebox">
      <div class="mytree">
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          :indent="0"
          :props="defaultProps"
          :render-content="renderContent"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="right">
        <div>
          <span>考核主题</span><span>{{ topicCount }}</span>
        </div>
        <div>
          <span>使用中指标</span><span>{{ yesKpiCount }}</span>
        </div>
        <div>
          <span>已停用指标</span><span>{{ noKpiCount }}</span>
        </div>
      </div>
    </div>
    <target-detail ref="TargetDetailRef" />
  </el-card>
</template>

<script>
import TargetDetail from './detail'
import {
  fetchDeptKpiTree,
  fetchProAreaKpiTree
} from '@/api/indicatorlib/headquarter'
export default {
  components: { TargetDetail },
  data() {
    return {
      data: [
        // {
        //   id: 1,
        //   label: '物业总公司22222',
        //   children: [
        //     {
        //       id: 2,
        //       label: '财务管理中心(4)',
        //       children: [
        //         {
        //           id: 3,
        //           label: '主营业务(5)',
        //           children: [
        //             {
        //               id: 4,
        //               label: '收入'
        //             },
        //             {
        //               id: 5,
        //               label: '税前利润'
        //             },
        //             {
        //               id: 6,
        //               label: '物业服务收费率'
        //             },
        //             {
        //               id: 7,
        //               label: '物违约金回收金额'
        //             },
        //             {
        //               id: 8,
        //               label: '综合收费率'
        //             }
        //           ]
        //         },
        //         {
        //           id: 9,
        //           label: '三级 1-1-2'
        //         }
        //       ]
        //     }
        //   ]
        // }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      noKpiCount: '0',
      topicCount: '0',
      yesKpiCount: '0',
      id: '0'
    }
  },
  mounted() {
    this.postFindPage()
    if (this.$store.state.user.userInfo.accountType === 1) {
      this.postFindPage()
    } else {
      this.fetchProAreaKpiTree()
    }
  },
  methods: {
    // 处理指标详情
    handleNodeClick(e, node) {
      if (node.data.type === 6) {
        console.log(e.id)
        var id = e.id.split(',')[e.id.split(',').length - 1]
        console.log(id)
        this.$refs.TargetDetailRef.open(id)
      }
    },
    renderContent(h, { node, data, store }) {
      // console.log(h)
      // console.log(node)
      // console.log(data)
      // console.log(store)
      if (node.data.type === 6 && node.data.kpiStatus === 1) {
        return (
          <span
            // node-click= this.handleTargetDetail()'
            class='custom-tree-node'
            style='display:flex;align-items:center;font-size:14px'
          >
            <span style='width:6px;height:6px;border-radius:50%;background-color: yellowgreen;display:inline-block;' />
            <span style='margin:0 5px'>{node.label}</span>
            <span> {store.label}</span>
            <span style='margin-left:5px'>
              (<span style='color:#409eff'>{node.data.totalCount}</span>)
            </span>
          </span>
        )
      } else if (node.data.type === 6 && node.data.kpiStatus === 2) {
        return (
          <span
            class='custom-tree-node'
            style='display:flex;align-items:center'
          >
            <span style='width:6px;height:6px;border-radius:50%;background-color: red;display:inline-block;' />
            <span style='margin:0 5px'>{node.label}</span>
            <span>{store.label}</span>
            <span style='margin-left:5px'>
              (<span style='color:#409eff'>{node.data.totalCount}</span>)
            </span>
          </span>
        )
      } else {
        return (
          <span
            class='custom-tree-node'
            style='display:flex;align-items:center'
          >
            <span style='margin:0 5px'>{node.label}</span>
            <span>{store.label}</span>
            <span style='margin-left:5px'>
              (<span>{node.data.totalCount}</span>)
            </span>
          </span>
        )
      }
    },
    // 获取 总部业务视角
    postFindPage() {
      // 获取列表
      fetchDeptKpiTree({}).then(res => {
        const { name, data, noKpiCount, topicCount, yesKpiCount } = res
        this.noKpiCount = noKpiCount
        this.topicCount = topicCount
        this.yesKpiCount = yesKpiCount
        this.id = res.id
        this.label = name
        this.data = this.formatting_tree(data, false)
      })
    },
    formatting_tree(d, have_line = false, filter_not_five = false) {
      const tree_obj = {} // 子节点按照父节点分类存入 对象中   key 为父节点ID
      d.forEach(item => {
        // eslint-disable-next-line no-irregular-whitespace
        // 遍历git  １、添加label = name　２、取出上级ID
        item.label = item.name
        const arr = tree_obj[item.parentId] || [] // 同父节点数据的 集合 数组
        arr.push(item)
        tree_obj[item.parentId] = arr
      })
      for (let i = 0; i < 6; i++) {
        // 找到顶级
        const key = (have_line ? '_' : '') + i
        if (tree_obj[key]) {
          var tree_arry = tree_obj[key]
          break
        }
      }
      console.log(tree_obj)
      console.log(tree_arry)
      var add_children = function(e) {
        // 根据ID查找添加自己的子节点
        for (let index = e.length - 1; index > -1; index--) {
          const item = e[index]
          if (tree_obj[item.id] && item.id !== item.parentId) {
            item.children = tree_obj[item.id]
            add_children(item.children)
          } else if (item.type !== 5 && filter_not_five) {
            e.splice(index, 1)
          }
        }
      }
      add_children(tree_arry)
      if (filter_not_five) {
        tree_arry = tree_arry.filter(item => {
          return item.children && item.children.length > 0
        })
      }
      return tree_arry
    },
    // 获取 业务区域 视角
    postProjectFindPage() {
      // 获取列表
      fetchProAreaKpiTree({}).then(res => {
        console.log(res)
        const { name, data, noKpiCount, topicCount, yesKpiCount } = res
        this.noKpiCount = noKpiCount
        this.topicCount = topicCount
        this.yesKpiCount = yesKpiCount
        this.label = name
        console.log(name)
        console.log(111)
        const tree_obj = {}
        var tree_array = []
        for (var item of data) {
          item.label = item.name
          if (
            !tree_obj[item.parentId] ||
            tree_obj[item.parentId].length === 0
          ) {
            tree_obj[item.parentId] = [item]
          } else {
            tree_obj[item.parentId].push(item)
          }
          if (item.type === 1) {
            tree_array.push(item)
          }
        }
        console.log(tree_obj)
        tree_array.forEach(items => {
          items.children = tree_obj[items.id]
          // console.log(items.children && items.children > 0)
          if (items.children && items.children.length > 0) {
            items.children.forEach(itm => {
              itm.children = tree_obj[itm.id]
            })
          }
        })

        this.data = tree_array
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.homebox {
  display: flex;
  justify-content: space-between;
  .right {
    display: flex;
    div {
      :nth-child(1) {
        color: #999;
        font-size: 14px;
      }
      margin-right: 5px;
      span {
        margin: 0 3px;
      }
    }
  }
}
.mytree /deep/ {
  font-size: 14px;
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }
  .el-tree-node :last-child:before {
    height: 38px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .el-tree-node:before {
    border-left: 1px dashed #ccc;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
  .el-tree-node:after {
    border-top: 1px dashed #ccc;
    height: 20px;
    top: 12px;
    width: 20px;
  }
}
</style>
